【Swift】画像をトリミングできるライブラリを使ってみた

#Swift

リルオッサ

2021.12.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

画像を切り抜きたいということがあったので調べてみるとTOCropViewControllerというイメージをトリミングするのに便利そうなライブラリがあったので使ってみることにしました。

TOCropViewController

Tim OliverさんのCropViewControllerです。ライブラリのイニシャルに自分の名前入っているのでかっこいいですね。

こんな感じで簡単に画像を切り取る機能を実装することが出来ます。

特徴

https://github.com/TimOliver/TOCropViewControllerのFeaturesから引用したものですが、このような機能を持っています。

グリッドオーバーレイの端をドラッグして画像を切り抜きます
必要に応じて、画像の円形コピーを切り抜きます
画像を90度のセグメントで回転させます
クロップボックスを特定のアスペクト比に固定します
すべての変更を完全に元に戻すためのリセットボタンがあります
iOS 7/8の半透明性により、トリミングされた領域が見やすくなります
コントローラにトリミングされた画像をデリゲートに返すか、すぐにUIActivityViewControllerに渡すかを選択します
デバイスを横向きモードに回転させたときのカスタムアニメーションとレイアウトを行えます
開始時および画面破棄時のアニメーションをカスタム出来ます
28の言語にローカライズされています

実装していきましょう。

開発環境

Xcode 13
Swift 5.5

インストール

CocoaPods
Swift Package Manager
Carthage
手動インストール

インストール方法

Swift Package Managerでのインストールに対応していたので今回はこちらでインストールすることにしました。

Xcodeプロジェクト内で、

File > Add package... > 検索フォームにhttps://github.com/TimOliver/TOCropViewController.gitを入れて検索するとライブラリが出てくるので選択してAdd packageをクリックします。

呼び出し

CropViewControllerをインポート。

import CropViewController

あとは、CropViewControllerを生成し、デリゲート設定して表示するだけです。

let cropViewController = CropViewController(croppingStyle: .default, image: image)
cropViewController.delegate = self
present(cropViewController, animated: true)

第一引数はTOCropViewCroppingStyleの列挙型で切り抜きするスタイルを選択でき、defaultとcircularがあります。
第二引数は切り抜きたい画像を渡します

default	circular

croppingStyleをcircularにすると、文字通り円形の切り抜きが行えるようになります。

Delegateメソッド

didCropImageToRect

ユーザーが切り抜きアクションを押した時に呼び出され、長方形をトリミングするだけです。

func cropViewController(_ cropViewController: CropViewController, didCropImageToRect rect: CGRect, angle: Int)

didCropToImage

ユーザーが切り抜きアクションを押した時に呼び出され、トリミング座標と切り抜きされたイメージを取得出来ます。

func cropViewController(_ cropViewController: CropViewController, didCropToImage image: UIImage, withRect cropRect: CGRect, angle: Int)

didCropToCircularImage

トリミングスタイルが円形に設定されている場合、このデリゲートを実装すると、切り抜きされたイメージ、およびトリミング座標を取得出来ます。

func cropViewController(_ cropViewController: CropViewController, didCropToCircularImage image: UIImage, withRect cropRect: CGRect, angle: Int)

didFinishCancelled

ユーザーがキャンセルを押すと呼ばれます。

func cropViewController(_ cropViewController: CropViewController, didFinishCancelled cancelled: Bool)

カスタマイズ

cropViewControllerのプロパティを設定すると画面をカスタマイズすることも出来ます。

let cropViewController = CropViewController(croppingStyle: .default, image: image)
cropViewController.delegate = self

// アスペクト比を何でプリセットするか
cropViewController.aspectRatioPreset = .preset4x3

// アスペクト比選択ボタンを非表示にするか
cropViewController.aspectRatioPickerButtonHidden = true

// リセットボタンを非表示にするか
cropViewController.resetButtonHidden = true

// キャンセルボタンを非表示にするか
cropViewController.cancelButtonHidden = true

// 回転ボタンを非表示にするか
cropViewController.rotateButtonsHidden = true

// Doneボタンを非表示にするか
cropViewController.doneButtonHidden = false

present(cropViewController, animated: true)

今回は初期表示にアスペクト比を4x3でプリセットして、Doneボタン以外を非表示にしてみました。